<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>记事本</title>
    <link type="text/css"rel="stylesheet" href="css/fonts.css">
    <link type="text/css" rel="stylesheet" href="css/collectList.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="js/index.js"></script>
</head>
<body>
 
<body>
 
 
    <div class="fav_list">
        <div data-v-357a65ed="" class="fav_list_box">
            <div  class="fav_list_title">
                <h5 class="fav_list_title_h3">请输入任务：</h5>
                <input v-model="inputvalue" @keyup.enter="Add" @click = "click" autofocus = "autofocus" autocapitalize="off" placeholder="请输入任务！" class = "new-todo">
                </div> 
            </div>


            <section class="main">
                <div class="my_fav_con">
                    <div class="list_item" v-for="(item,index) in list">
                        <span :class="item.done?'my_fav_list_b':'my_fav_list_a'"><span class="index">{{index+1+'.'}}</span>{{item.affair}}</span>
                        <button class="iconfont btn" v-if="item.done" @click="doing(index)">&#xe63a;</button>
                        <button class="iconfont btn" v-else="item.done" @click="doing(index)">&#xe61e;</button>
                        <button class="btn"  @click='remove(index)'><span class="iconfont">&#xe600;</span></button>

                    </div>
                </div>
            </section>
            <!-- 统计 -->
            <footer class="footer">
            <span class="r_w" >任务数量：<strong>{{list.length}}</strong> </span>
            <span class="r_b"> 
                完成的移动到底部
                <button class="iconfont btn" v-if="doneToButton" @click="ToButton">&#xe63a;</button>
                <button class="iconfont btn" v-else="doneToButton" @click="ToButton">&#xe61e;</button></span>
            <button style="float: right;" @click = "clear" v-show='list.length!=0'>清空</button>
            </footer>
            <!-- 底部             -->
            <footer class="info">
             
            </footer>
        </div>
    </div>
     
    </body>
</body>
</html>